<template>
  <a-spin :spinning="spinning">
    <a-card title="基础信息">
      <a-form :form="form">
        <a-row :gutter="10">
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="工号"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="工号不可重复"
                :disabled="readOnly"
                v-decorator="[
                  'uuid',
                  { rules: [{ required: true, message: '工号不可重复' }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="账号"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="请输入账号"
                :disabled="readOnly"
                v-decorator="[
                  'account',
                  { rules: [{ required: true, message: '请输入账号' }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="密码"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input-password
                placeholder="请输入密码"
                :disabled="
                  this.modifyEntity.operation != this.operationFlag.Add
                "
                v-decorator="[
                  'pwd',
                  { rules: [{ required: true, message: '请输入密码' }] },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="10">
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="昵称"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="请输入昵称"
                :disabled="readOnly"
                v-decorator="[
                  'nickName',
                  { rules: [{ required: true, message: '请输入昵称' }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="客服微信"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="请输入客服微信"
                :disabled="readOnly"
                v-decorator="[
                  'weiXin',
                  { rules: [{ required: true, message: '请输入客服微信' }] },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="所属用户组"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-select
                :disabled="readOnly"
                v-decorator="[
                  'userGroupId',
                  { rules: [{ required: false, message: '请选择所属用户组' }] },
                ]"
                @change="handleUserGroupChange"
                placeholder="请选择所属用户组"
                style="width: 100%"
              >
                <a-select-option
                  v-for="item in userGroups"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card title="详细信息" class="element-top">
      <a-form :form="form">
        <a-row :gutter="10">
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="所属角色"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-select
                :disabled="readOnly"
                v-decorator="[
                  'roleId',
                  { rules: [{ required: true, message: '请选择所属角色' }] },
                ]"
                @change="handleRoleChange"
                placeholder="请选择所属角色"
                style="width: 100%"
              >
                <a-select-option
                  v-for="item in roles"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="是否删除"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              required
            >
              <a-switch
                :disabled="readOnly"
                v-decorator="[
                  'deleteFlag',
                  { valuePropName: 'checked', initialValue: false },
                ]"
                un-checked-children="否"
                checked-children="是"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="状态"
              :label-col="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-switch
                :disabled="readOnly"
                v-decorator="[
                  'status',
                  { valuePropName: 'checked', initialValue: true },
                ]"
                un-checked-children="冻结"
                checked-children="正常"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="10">
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="投放开关"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-switch
                :disabled="readOnly"
                v-decorator="[
                  'isPush',
                  { valuePropName: 'checked', initialValue: true },
                ]"
                un-checked-children="关闭"
                checked-children="开启"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="简介"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-textarea
                :disabled="readOnly"
                v-decorator="['descption']"
                placeholder="请输入简介"
                :rows="4"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card v-if="readOnly" class="element-top" title="其他信息">
      <a-form :form="form">
        <a-row>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="当前登录时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                :disabled="readOnly"
                v-decorator="['currentLoginTime']"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="登录总次数"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['loginTotalCount']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="上次登录时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['lastLoginTime']" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="上次登录IP地址"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['lastLoginIp']" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="创建时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['createTime']" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="创建人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['createUser']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="修改时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['updateTime']" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
            <a-form-item
              label="修改人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['updateUser']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <footer-tool-bar>
      <a-space>
        <a-button icon="rollback" @click="handleRefresh">返回</a-button>
        <a-button
          icon="reload"
          v-if="!readOnly"
          @click="handleReset"
          :loading="loading"
          >重置</a-button
        >
        <a-button
          icon="check-circle"
          v-if="!readOnly"
          :loading="loading"
          @click="handleSubmit"
          >保存</a-button
        >
      </a-space>
    </footer-tool-bar>
  </a-spin>
</template>

<script>
// MD5加密
import md5 from "md5";
import footerToolBar from "@/components/footerToolbar";
import { getUserGroupList } from "@/api/sysUserGroup";
import { getSysAdmin, addSysAdmin, updateSysAdmin } from "@/api/sysAdmin";

export default {
  components: {
    footerToolBar,
  },
  props: {
    modifyEntity: {
      type: Object,
      required: true,
      default: function () {
        return {
          // 传递的主键
          id: "",
          // 页面标题
          title: "新增管理员",
          // 页面操作类型
          operation: this.operationFlag.Add,
          // 是否展示编辑页面
          showModify: false,
        };
      },
    },
  },
  data() {
    return {
      userGroups: [],
      userTypeList: [],
      // 显示描述宽度
      labelCol: { md: { span: 8 }, xs: { span: 24 }, sm: { span: 12 } },
      // 输入框宽度
      wrapperCol: { md: { span: 16 }, xs: { span: 24 }, sm: { span: 12 } },
      // 执行保存后是否关闭当前页面
      hasClose: false,
      // 遮罩层加载
      spinning: false,
      // 按钮加载状态
      loading: false,
      // 只读状态
      readOnly: false,
      form: this.$form.createForm(this),
      entity: {},
      roles: [
        { id: "1", name: "管理员" },
        { id: "2", name: "业务员" },
      ],
    };
  },
  mounted() {
    this.loadUserGroupData();
    this.loadData();
  },
  methods: {
    //#region 加载数据
    loadUserGroupData() {
      let that = this;
      getUserGroupList().then((res) => {
        that.userGroups = res.data;
      });
    },
    loadData() {
      this.readOnly =
        this.modifyEntity.operation === this.operationFlag.Detail
          ? true
          : false;
      this.form.resetFields(); // 重置参数值
      //修改，详情获取详细信息
      if (this.modifyEntity.operation !== this.operationFlag.Add) {
        let that = this;
        this.spinning = true;
        getSysAdmin({ id: this.modifyEntity.id })
          .then((res) => {
            that.entity = res.data;
            var setData = {};
            Object.keys(that.form.getFieldsValue()).forEach((item) => {
              setData[item] = that.entity[item];
            });
            that.form.setFieldsValue(setData);
            that.spinning = false;
          })
          .catch((error) => {
            that.spinning = false;
          });
      }
    },
    //#endregion

    //#region 保存
    // 保存
    handleSubmit() {
      let that = this;
      this.spinning = true;
      this.form.validateFields((errors, values) => {
        if (!errors) {
          if (that.modifyEntity.operation === that.operationFlag.Add) {
            values.pwd = md5(values.pwd);
            addSysAdmin(values).then((res) => {
              that.submitResult(res);
            });
          } else {
            that.entity = Object.assign(
              that.entity,
              that.form.getFieldsValue()
            );
            updateSysAdmin(that.entity).then((res) => {
              that.submitResult(res);
            });
          }
        } else {
          this.spinning = false;
        }
      });
    },
    // 保存结果
    submitResult(res) {
      if (res.success) {
        this.$notification.success({ description: res.msg });
        if (!this.hasClose) {
          this.$emit("handleRefresh");
        }
      } else {
        this.$notification.error({ description: res.msg });
      }
      this.spinning = false;
    },
    //#endregion

    //#region  取消、关闭、重置
    // 取消、关闭
    handleRefresh() {
      this.spinning = false;
      this.$emit("handleRefresh");
    },
    // 重置
    handleReset() {
      this.loadData();
    },
    //#endregion

    //#region 下拉设置值
    handleRoleChange(val) {
      if (val) {
        this.form.setFieldsValue({ roleId: val });
      }
    },
    handleUserGroupChange(val) {
      if (val) {
        this.form.setFieldsValue({ userGroupId: val });
      }
    },
    //#endregion
  },
};
</script>
<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.avatar {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
